<!-- 首页 -->
<template>
	<view class="bg">
		<view class="game-title">交保证金</view>
		<view class="close-btn" @click="cannel">
			<u-icon name="close" color="#fff"></u-icon>
		</view>
		<scroll-view scroll-y="true" class="game-box">
			<view class="text-box">
				<rich-text :nodes="intro"></rich-text>
			</view>
		</scroll-view>
		<view class="confrim-btn" v-if="platform != 'ios'">
			<view class="fabu-btn" @click="fabu">
				支付保证金10元
			</view>
		</view>
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	props: {
		platform: {
			// 动态数据
			type: String,
			required: true,
			default: function() {
				return 'android';
			}
		},
	},
	data() {
		return {
			intro: '<p>欢迎使用我们的游戏固玩平台。为了确保长期游戏伙伴能够准时参加游戏，我们要求您在加入特定游戏组之前支付一笔保证金作为承诺和贡献。</p ><p>这笔保证金将被用于以下目的：</p ><ol><li>控制固定游戏时间内的迟到或缺席情况。</li><li>激励大家共同维护游戏环境的友好和公正。</li><li>保护固定游戏队员的权益，防止不必要的荒废或失联。</li></ol><p>请注意，这笔保证金是按照每个游戏小组的标准金额设定的，并且是可退还的（根据特定的退款政策）。如果您在规定日期内参加了所有游戏，则您的保证金将自动退还到您的账户余额中。如果您没有参加所有游戏，您可能会失去部分或全部保证金。</p ><p>通过支付保证金，您同意并遵守以下条款：</p ><ol><li>遵守游戏规则和平台的管理规定。</li><li>准时出现并参加所有预定的游戏。</li><li>在讨论版块中积极参与讨论，对团队成员进行支持和协助。</li><li>在必要时与其他团队成员取得联系，以协调游戏计划。</li></ol><p>我们希望您在我们的平台上玩得愉快。如果您有任何问题或疑虑，请随时联系我们的客户服务。</p >',
			title: '',
			titleStyle: {
				color: '#fff',
				width: '100%'
			},
			areaList: [
				{
				label: 'QQ区',
				value: 'QQ区',
				active: false,
				},
				{
				label: '微信区',
				value: '微信区',
				active: true,
				},
			],
			modelList: [
				{
				label: '上分局',
				value: '上分局',
				active: true,
				},
				{
				label: 'CPDD',
				value: 'CPDD',
				active: false,
				},
			],
			rankList: [
				{
				label: '五排',
				value: '五排',
				active: true,
				},
				{
				label: '三排',
				value: '三排',
				active: false,
				},
				{
				label: '双排',
				value: '双排',
				active: false,
				},
			],
			dateList: [
				{
				label: '一周',
				value: '一周',
				active: true,
				},
				{
				label: '一个月',
				value: '一个月',
				active: false,
				},
				{
				label: '三个月',
				value: '三个月',
				active: false,
				},
			],
			levelList: [
				{
				label: '青铜',
				value: '青铜',
				active: false,
				},
				{
				label: '白银',
				value: '白银',
				active: false,
				},
				{
				label: '黄金',
				value: '黄金',
				active: false,
				},
				{
				label: '铂金',
				value: '铂金',
				active: false,
				},
				{
				label: '钻石',
				value: '钻石',
				active: false,
				},
				{
				label: '星耀',
				value: '星耀',
				active: false,
				},
				{
				label: '最强王者',
				value: '最强王者',
				active: false,
				},
				{
				label: '无双王者',
				value: '无双王者',
				active: false,
				},
				{
				label: '荣耀王者',
				value: '荣耀王者',
				active: false,
				},
				{
				label: '传奇王者',
				value: '传奇王者',
				active: false,
				},
			],
			timeList: [
				{
				label: '01:00-03:00',
				value: '01:00-03:00',
				active: false,
				},
				{
				label: '03:00-06:00',
				value: '03:00-06:00',
				active: false,
				},
				{
				label: '06:00-09:00',
				value: '06:00-09:00',
				active: false,
				},
				{
				label: '09:00-12:00',
				value: '09:00-12:00',
				active: false,
				},
				{
				label: '12:00-15:00',
				value: '12:00-15:00',
				active: false,
				},
				{
				label: '15:00-18:00',
				value: '15:00-18:00',
				active: false,
				},
				{
				label: '18:00-21:00',
				value: '18:00-21:00',
				active: false,
				},
				{
				label: '21:00-24:00',
				value: '21:00-24:00',
				active: false,
				},
			],
			unit: 100,
			show: false,
			value: 20,
			status: 'loadmore',
			isEnd: false,
			current: 1,
			pageSize: 10,
			scrollTop: 0,
			dataList: [],
			customStyle: {
				display: 'flex',
				flex: '1',
				background: '#649f40',
			},
		};
	},
	computed: {
		...mapState(['vuex_coin_tip','vuex_amount']),
	},
	methods: {
		tapArea(e) {
			for(var i=0;i<this.areaList.length;i++){
				var area = this.areaList[i];
				area.active = false;
			}
			this.areaList[e].active = true;
		},
		tapModel(e) {
			for(var i=0;i<this.modelList.length;i++){
				var area = this.modelList[i];
				area.active = false;
			}
			this.modelList[e].active = true;
		},
		tapRank(e) {
			for(var i=0;i<this.rankList.length;i++){
				var area = this.rankList[i];
				area.active = false;
			}
			this.rankList[e].active = true;
		},
		tapLevel(e) {
			var sum = 0;
			for(var i=0;i<this.levelList.length;i++){
				var area = this.levelList[i];
				if(area.active){
					sum++;
				}
			}
			if(sum >= 3){
				this.levelList[e].active = false;
				return;
			}
			if(this.levelList[e].active){
				this.levelList[e].active = false;
			}else{
				this.levelList[e].active = true;
			}
		},
		tapTime(e) {
			for(var i=0;i<this.timeList.length;i++){
				var area = this.timeList[i];
				area.active = false;
			}
			this.timeList[e].active = true;
		},
		tapDate(e) {
			for(var i=0;i<this.dateList.length;i++){
				var area = this.dateList[i];
				area.active = false;
			}
			this.dateList[e].active = true;
		},
		cannel() {
			uni.$emit('game-gold', false);
		},
		fabu() {
			if(this.title == ''){
				this.$u.toast('请输入固玩名称');
				return;
			}
		},
		record() {
			this.$u.route({
				url: 'packgeMine/pages/me/coin',
			});
		},
		toVip() {
			this.cannel();
			this.$u.route({
				url: 'packgeMine/pages/me/vip',
			});
		},
		handleHot() {
			var coinNum = this.value * this.unit;
			this.$u.post('/pay/coin/payNum',{
				coinNum: coinNum,
				appId: this.website.appId,
			}).then(res => {
				var that = this;
				uni.requestPayment({ 
					provider: 'wxpay',
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.packageValue,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
							icon:'success',
							duration: 2000
						});
						that.$emit('ok');
					},
					fail: function(err) {
						uni.showModal({
							title: '温馨提示',
							content: '订单尚未支付',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									
								}
							}
						});
					}
				});
			});
			
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.bg {
		background-color: #280a32eb;
	}
	.text-box {
		white-space: pre-wrap;
	}
	.game-title {
		display: flex;
		justify-content: center;
		padding: 10px;
		color: #fff;
		font-size: 30rpx;
	}
	.close-btn {
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.confrim-btn {
		padding: 15px;
		display: flex;
		justify-content: center;
	}
	.fabu-btn {
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 50px;
		color: #fff;
		padding: 20rpx 120rpx;
		display: flex;
		animation: btnScaleAni 3.5s infinite;
	}
	.game-box {
		color: #fff;
		padding: 30rpx;
		max-height: 900rpx;
		overflow: scroll;
	}
	.tag-list {
		margin-bottom: 10px;
	}
	.tag-title {
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #f5daff;
	}
	.tag-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		color: #d6a9e7;
	}
	.tag-input {
		width: 100%;
	}
	.active {
		background-color: #5c2c6b;
		color: #fff;
	}
	.tag {
		border-radius: 6px;
		border: 1px solid #5c2c6b;
		font-size: 10px;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
		align-items: center;
		min-width: 170rpx;
		line-height: 25px;
	}
	.label {
		margin-bottom: 15px;
		font-size: 14px;
		color: #fff;
	}
	.amount {
		font-size: 30rpx;
		font-weight: bold;
	}
	.coin-box {
		padding: 15px;
	}
	.coin-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
	}
	.record {
		font-size: 20rpx;
		line-height: 20px;
		color: #303133;
		background: #c0c4cc;
		padding: 3px 10px;
		border-radius: 3px;
		font-weight: bold;
	}
	.coin-tip {
		font-size: 28rpx;
		color: red;
		font-weight: bold;
		padding: 15px;
		display: flex;
		justify-content: center;
		background: #ffeaea;
	}
	.ad-btn-box {
		padding: 15px;
		display: flex;
		justify-content: center;
		flex: 1;
	}
	.ad-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: btnScaleAni 3.5s infinite;
	}
	.vip-tab-box {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		justify-content: space-between;
		margin-bottom: 15px;
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
</style>
